The overall appearance and behavior of the document is specified in the YAML:

---
title: "Untitled"
format: html
editor: visual
---

---
title: "Untitled"
format: pdf
editor: visual
---

Source vs. Visual

YAML: Table of Contents (ToC)

---
title: "My quarto file"
author: "Jane Doe"
date: today
format: 
  html:
    self-contained: true     # 1
    toc: true                # 2   
    toc-title: My contents   # 3
    toc-location: left       # 4
editor: source
lang: it
---

1. Allows for the sharing of the hmtl file without requiring for external files

2. Put Table of Contents

3. Define the title of the ToC

4. Location of the ToC (left, right, body)

Headings

# First level

Section

## Second level

Subsection

### Third level

Sub-subsection

#### Fourth level

Paragraph

##### Fifth level

I frankly have never used that

##### Sixth level

I have no idea

Text Formatting

Markdown syntax: Font

*italics*, **bold**, ***bold italics*** 

Output

italics, bold, bold italics

textsuperscirpt^2^, textunderscript~2~

`this is myinline code`

Links and images

<https://github.com/>

https://github.com/

My link is [here](https://github.com/)

![This is an image](img/picture.jpg)

Lists

* Main Unordered List
  + First sub-item
  + Second sub-item 
    - It's getting weird

1. Main ordered list
2. Second item
   i) First sub-item 1
      A.  First sub-sub-item 1

- [ ] First things first 1
- [ ] Second things second 2

Math

In-line math:

This is an in-line equation $y = \beta_0 + \beta_1 X + \varepsilon$

This is an in-line equation \(y = \beta_0 + \beta_1 X + \varepsilon\)

This is an  equation $$z = \dfrac{\bar{x} -\mu}{\sigma}$$

GitHub pages

Navigate to your GitHub repository online:

It worked!

(take some time, be patient)

README.md

This file handles the generation of the website

It works with basic markdown syntax

Links

They create the index to the pages we want to display in our website

[My presentation](files/my_file.html)

commit + push

Don’t forget to push!

Check

Your turn!

Inside your R project for this school:

• Create a new HMTL quarto document that must contain:

  • 3 sections (level I heading), each with a subsection (level II heading)
  • Place a picture with a caption in one of the subsection
  • Place an unordered list

• Render the document in HTML

• Create the link to your newly created document in the README.md

• Commit & push the .qmd and .html of your newly created document

• Commit & push the .md and .htmlof the README file

By default, the HTML document is set to take all the space in the page

format: 
  html:
    page-layout: full

Custom layout with grid

The page layout is based on a 12-unit (or 12-column) grid system, which can be used to divide the space accordingly:

::: {.grid}

::: {.g-col-4}

First column, 4/12 of the total width

:::

::: {.g-col-8}

Second column, 8/12 of the total width 

:::

:::

Columns

:::: {.columns}


::: {.column width="50%"}

This is my first column!

:::

::: {.column width="50%"}

And this is the second column
:::

::::

(Best for HMTL presentation)

tabset: code

::: {.panel-tabset}

## Aim

Here I present the aim of the study 

## Methods

Here I present the methods used to pursue the aim

## Results

And here I present the results

:::

tabset: output

Document layout

format: 
  html: 
   toc: true
   toc-location: left
   grid:
    sidebar-width: 300px
    body-width: 900px
    margin-width: 300px
    gutter-width: 1.5rem

Margins

You can place anything in the margins of the documents!

:::{.column-margin}
I want this picture displayed in the margin 


![](img/peacock.png)
:::

Your turn

From the previous document:

• In one of the sections, create a grid dividing the space in 3 intervals of different width
• Place a picture in each of the three intervals
• In a subsection:
  • Create a panel tabset with 3 tabs (like Introduction, Methods, Results)
  • Add a picture in the margin of the document